<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common-component.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>
    <link href="/static/css/lowcode/generateForm.css" rel="stylesheet"/>

    <title>代码生成</title>
    <style>

    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box flex-y">

    <el-row :gutter="15">
        <el-col :span="24">
            <el-tabs model-value="0" class="demo-tabs">
                <el-tab-pane label="基本信息" :lazy="true" name="0">
                    <el-form :inline="false" :model="formData" label-position="right" label-width="140px">
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <el-form-item label="数 据 表">
                                    <jo-el-data url="{URL_CMS}lowcode/db/getTableList">
                                        <template #default="scope">
                                            <el-select v-model="formData.tableName" placeholder="请选择数据表"
                                                       :filterable="true"
                                                       @change="tableChange">
                                                <el-option :label="item.tableName" :value="item.tableName"
                                                           v-for="item in scope.data"></el-option>
                                            </el-select>
                                        </template>
                                    </jo-el-data>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="实体类名">
                                    <el-input v-model="formData.className"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="表(类)注 释">
                                    <el-input v-model="formData.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="链路追踪">
                                    <el-radio-group v-model="formData.extInfo.traceType">
                                        <el-radio :label="1">完整启用</el-radio>
                                        <el-radio :label="2">仅Web入口</el-radio>
                                        <el-radio :label="0">不启用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="基础包路径">
                                    <el-input v-model="formData.packagePath"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="模 块 名">
                                    <el-input v-model="formData.moduleName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="保存路径">
                                    <el-input v-model="formData.savePath"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="服务域名">
                                    <jo-el-data url="{URL_CMS}lowcode/generate/getDomainList">
                                        <template #default="scope">
                                            <el-select v-model="formData.extInfo.webDomain" placeholder="请选择服务域名">
                                                <el-option :label="item.value" :value="item.key"
                                                           v-for="item in scope.data"></el-option>
                                            </el-select>
                                        </template>
                                    </jo-el-data>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="作　　者">
                                    <el-input v-model="formData.author"></el-input>
                                </el-form-item>
                            </el-col>


                            <el-col :span="24">
                                <el-form-item label="其他属性">
                                    <div>
                                            <span class="other-config-item"
                                                  title="选择Online模式，则不需要生成代码文件，使用统一Api和Html提供服务，页面Url：/lowcode/online/html/view/{id}">
                                                <el-checkbox v-model="formData.extInfo.onlineCodeFlag" label="Online模式"
                                                             :true-label="1" :false-label="0"></el-checkbox>
                                            </span>
                                        <span class="other-config-item">
                                                <el-checkbox v-model="formData.extInfo.supportImportExcel" label="支持导入"
                                                             :true-label="1" :false-label="0"></el-checkbox>
                                            </span>
                                        <span class="other-config-item">
                                                <el-checkbox v-model="formData.extInfo.supportExportExcel" label="支持导出"
                                                             :true-label="1" :false-label="0"></el-checkbox>
                                            </span>
                                        <span class="other-config-item">
                                                <el-radio-group v-model="formData.extInfo.modelExtendsType">
                                                    <el-radio :label="1">继承DbSortDO</el-radio>
                                                    <el-radio :label="2">继承BaseDO模型</el-radio>
                                                    <el-radio :label="3">继承并自动填充BaseDO</el-radio>
                                                </el-radio-group>
                                            </span>
                                    </div>

                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="CSS引用">
                                    <template #label="">
                                        <div style="display: flex;align-items: center">
                                            CSS引用（
                                            <el-button link type="primary"
                                                       @click="formData.extInfo.cssLinkList.push({})">添加
                                            </el-button>
                                            ）
                                        </div>
                                    </template>
                                    <el-input v-for="(css,idx) in formData.extInfo.cssLinkList" v-model="css.url"
                                              placeholder="css链接,例如:/static/css/biz.css" style="margin-bottom: 5px;">
                                        <template #suffix="">
                                            <el-button link type="danger"
                                                       @click="formData.extInfo.cssLinkList.splice(idx, 1)">
                                                <i class="fa fa-trash"></i>
                                            </el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="JS引用">
                                    <template #label="">
                                        <div style="display: flex;align-items: center">
                                            JS引用（
                                            <el-button link type="primary"
                                                       @click="formData.extInfo.jsLinkList.push({})">添加
                                            </el-button>
                                            ）
                                        </div>
                                    </template>
                                    <el-input v-for="(js,idx) in formData.extInfo.jsLinkList" v-model="js.url"
                                              placeholder="js链接,例如:/static/js/biz.js" style="margin-bottom: 5px;">
                                        <template #suffix="">
                                            <el-button link type="danger"
                                                       @click="formData.extInfo.jsLinkList.splice(idx, 1)">
                                                <i class="fa fa-trash"></i>
                                            </el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="查询配置">
                                    <template #label="">
                                        <div style="display: flex;align-items: center">
                                            查询配置（
                                            <el-button link type="primary"
                                                       @click="appendFieldSearchConfig">添加
                                            </el-button>
                                            ）
                                        </div>
                                    </template>
                                    <div v-if="!formData.extInfo.fieldSearchConfigList || formData.extInfo.fieldSearchConfigList.length==0">
                                        暂无~
                                    </div>
                                    <div style="width: 100%;display: flex;margin-bottom: 10px;border: #ccc dashed 1px;padding: 5px 10px;border-radius: 4px;"
                                         v-for="item in formData.extInfo.fieldSearchConfigList">
                                        单查询：
                                        <el-switch v-model="item.selectOneFlag" :active-value="true"
                                                   :inactive-value="false"></el-switch>
                                        <div style="padding-left: 15px;">查询字段：</div>
                                        <div style="flex:1;">
                                            <el-select style="width: 100%;" v-model="item.fieldJavaNameList" :multiple="true" placeholder="请选择查询字段">
                                                <el-option v-for="field in columnList" :value="field.fieldJavaName" :label="field.fieldJavaName">
                                                    {{field.fieldJavaName}}（{{field.listHeaderTitle}}）
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="字段配置" :lazy="true" name="1">
                    <el-table :data="columnList" border
                              header-cell-class-name="jo-el-table-header"
                              :height="tableHeight">
                        <el-table-column prop="fieldDbName" label="字段" width="">
                            <template #default="scope">
                                <span :class="{'field-not-null' : scope.row.fieldDbNotNull==1}">{{scope.row.fieldDbName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldDbRemark" label="字段说明" width=""></el-table-column>
                        <el-table-column prop="fieldDbType" label="字段类型" width="150">
                            <template #default="scope">
                                {{scope.row.fieldDbType}}
                                <span v-if="scope.row.fieldDbLength">({{scope.row.fieldDbLength}})</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldJavaName" label="Java属性">
                            <template #default="scope">
                                <el-input v-model="scope.row.fieldJavaName" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldJavaType" label="Java类型">
                            <template #default="scope">
                                <el-input v-model="scope.row.fieldJavaType" size="small"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column prop="supportImport" label="支持导入">
                            <template #default="scope">
                                <el-switch v-model="scope.row.supportImport" :active-value="1"
                                           :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="supportExport" label="支持导出">
                            <template #default="scope">
                                <el-switch v-model="scope.row.supportExport" :active-value="1"
                                           :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="视图配置" :lazy="true" name="2">

                    <div class="view-config-bar" :style="{'height' : contentHeight + 'px'}">

                        <!--左侧视图配置选项-->
                        <div class="view-config-left-bar">

                            <el-tabs v-model="viewConfigTab" class="qy-full-tabs">

                                <el-tab-pane label="页面配置" name="tablePageConfig">
                                    <el-scrollbar>
                                        <el-form :model="formData" label-position="top" label-width="100px">
                                            <el-form-item label="按钮栏">
                                                <template #label="scope">
                                                    <el-divider content-position="left">
                                                        <span>按钮栏 </span>
                                                        <el-button link type="primary" @click="addListBtn(1)"><i
                                                                class="fa fa-plus" aria-hidden="true"></i></el-button>
                                                    </el-divider>
                                                </template>
                                                <div id="btnBarConfigBox" style="display: flex;flex-wrap: wrap;"
                                                     v-if="formData.extInfo.buttonBarConfig && formData.extInfo.buttonBarConfig.buttonList">
                                                    <div v-for="btn in formData.extInfo.buttonBarConfig.buttonList"
                                                         class="btn-bar-item"
                                                         draggable="true"
                                                         @dragstart.stop.self="dragStart($event, btn)"
                                                         @drag.stop.self="drag($event, btn)"
                                                         @dragend.stop.self="dragEnd($event, btn)"
                                                         @dragenter.stop="dragEnter($event, btn)"
                                                         @dragleave.stop="dragLeave($event, btn)"
                                                         @dragover.stop.prevent="dragOver($event, btn)"
                                                         @drop.stop="drop($event, btn, 1)"
                                                    >
                                                        <div>
                                                            <el-button v-if=" btn.category == 'plain' " plain
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'link' " link
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'text' " text
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'round' " round
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'circle' " circle
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else="" :type="btn.type" :size="btn.size"><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                        </div>
                                                        <div style="font-size: 10px;line-height: 1;display: flex;flex-direction:column;width: 16px;text-align: center;margin-left: 2px;">
                                                <span class="btn-config-oper" @click="editListBtn(btn, 1)"><i
                                                        class="fa fa-cog" aria-hidden="true"></i></span>
                                                            <span class="btn-config-oper" @click="deleteListBtn(btn, 1)"><i
                                                                    class="fa fa-trash-o" aria-hidden="true"></i></span>
                                                        </div>
                                                    </div>
                                                </div>

                                            </el-form-item>
                                            <el-form-item label="表格首列：">
                                                <template #label="scope">
                                                    <el-divider content-position="left">表格首列类型</el-divider>
                                                </template>
                                                <jo-el-data url="{URL_CMS}lowcode/generate/getFirstColumnTypeList">
                                                    <template #default="scope">
                                                        <el-radio-group v-model="formData.extInfo.tableFirstColumnType">
                                                            <el-radio :label="item.key" v-for="item in scope.data"
                                                                      style="width: 60px;">
                                                                {{item.value}}
                                                            </el-radio>
                                                        </el-radio-group>
                                                    </template>
                                                </jo-el-data>
                                            </el-form-item>
                                            <el-form-item label="表格操作列：">
                                                <template #label="scope">
                                                    <el-divider content-position="left">
                                                        <span>表格行级按钮 </span>
                                                        <el-button link type="primary" @click="addListBtn(2)"><i
                                                                class="fa fa-plus" aria-hidden="true"></i></el-button>
                                                    </el-divider>
                                                </template>
                                                <div style="display: flex;flex-wrap: wrap;"
                                                     v-if="formData.extInfo.tableRowButtonConfig && formData.extInfo.tableRowButtonConfig.buttonList">
                                                    <div class="btn-bar-item"
                                                         v-for="btn in formData.extInfo.tableRowButtonConfig.buttonList"
                                                         draggable="true"
                                                         @dragstart.stop.self="dragStart($event, btn)"
                                                         @dragend.stop.self="dragEnd($event, btn)"
                                                         @dragover.stop.prevent="dragOver($event, btn)"
                                                         @drop.stop="drop($event, btn, 2)"
                                                    >
                                                        <div>
                                                            <el-button v-if=" btn.category == 'plain' " plain
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'link' " link
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'text' " text
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'round' " round
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else-if=" btn.category == 'circle' " circle
                                                                       :type="btn.type" :size="btn.size" plain><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                            <el-button v-else="" :type="btn.type" :size="btn.size"><span
                                                                    v-html="btn.icon"></span>{{btn.name}}
                                                            </el-button>
                                                        </div>
                                                        <div style="font-size: 10px;line-height: 1;display: flex;flex-direction:column;width: 16px;text-align: center;margin-left: 2px;">
                                                <span class="btn-config-oper" @click="editListBtn(btn, 2)"><i
                                                        class="fa fa-cog" aria-hidden="true"></i></span>
                                                            <span class="btn-config-oper" @click="deleteListBtn(btn, 2)"><i
                                                                    class="fa fa-trash-o" aria-hidden="true"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-form-item>

                                            <el-form-item label="搜索条件：">
                                                <template #label="scope">
                                                    <el-divider content-position="left">
                                                        搜索条件（
                                                        <el-button link type="primary"
                                                                   @click="searchConditionListForm = true">添加
                                                        </el-button>
                                                        ）
                                                    </el-divider>
                                                </template>
                                                <div id="searchConditionBox" style="display: flex;flex-wrap: wrap;"
                                                     v-if="formData.extInfo.searchConditionList">
                                                    <div v-for="(btn,idx) in formData.extInfo.searchConditionList"
                                                         class="btn-bar-item"
                                                         draggable="true"
                                                         @dragstart.stop.self="dragStart2($event, btn)"
                                                         @dragend.stop.self="dragEnd2($event, btn)"
                                                         @dragover.stop.prevent="dragOver2($event, btn)"
                                                         @drop.stop="drop2($event, btn, 1)"
                                                    >
                                                        <div>
                                                            <el-tag>
                                                                {{btn.listHeaderTitle}}
                                                            </el-tag>
                                                        </div>
                                                        <div class="drag-item-oper-bar">
                                                            <!--                                                            <span class="btn-config-oper" @click="editListBtn(btn, 1)"><i class="fa fa-cog" aria-hidden="true"></i></span>-->
                                                            <span class="btn-config-oper"
                                                                  @click="formData.extInfo.searchConditionList.splice(idx,1)"><i
                                                                    class="fa fa-trash-o" aria-hidden="true"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-form-item>

                                            <el-form-item>
                                                <template #label="scope">
                                                    <el-divider content-position="left">默认排序</el-divider>
                                                </template>
                                                <el-descriptions :column="1" border size="small" style="width: 100%;">
                                                    <el-descriptions-item label="字段">
                                                        <el-select v-model="formData.extInfo.defaultSortBy" size="small" placeholder="默认排序字段">
                                                            <el-option v-for="item in columnListForDefaultSort" :value="item.fieldDbName">{{item.fieldDbName}}：{{item.listHeaderTitle}}</el-option>
                                                        </el-select>
                                                    </el-descriptions-item>
                                                    <el-descriptions-item label="类型">
                                                        <el-select v-model="formData.extInfo.defaultSortType" size="small" placeholder="默认排序类型">
                                                            <el-option value="asc" label="asc"></el-option>
                                                            <el-option value="desc" label="desc"></el-option>
                                                        </el-select>
                                                    </el-descriptions-item>
                                                </el-descriptions>
                                            </el-form-item>

                                            <el-form-item>
                                                <template #label="scope">
                                                    <el-divider content-position="left">树形表格</el-divider>
                                                </template>
                                                <lcp-config-item title="启用状态" width="6em">
                                                    <el-switch v-model="formData.extInfo.supportTreeTable"
                                                               :active-value="1"
                                                               :inactive-value="0"></el-switch>
                                                </lcp-config-item>
                                                <lcp-config-item title="row-key" width="6em" v-if="formData.extInfo.supportTreeTable==1">
                                                    <el-input v-model="formData.extInfo.treeTableRowKey" placeholder="数据行唯一标识字段,默认为id"></el-input>
                                                </lcp-config-item>
                                                <lcp-config-item title="子数据字段名" width="6em" v-if="formData.extInfo.supportTreeTable==1">
                                                    <el-input v-model="formData.extInfo.treeTableChildrenField" placeholder="子数据字段名,默认为children"></el-input>
                                                </lcp-config-item>

<!--                                                <el-descriptions :column="1" border size="small" style="width: 100%;">-->
<!--                                                    <el-descriptions-item label="启用状态">-->
<!--                                                        <el-switch v-model="formData.extInfo.supportTreeTable" size="small"-->
<!--                                                                   :active-value="1"-->
<!--                                                                   :inactive-value="0"></el-switch>-->
<!--                                                    </el-descriptions-item>-->
<!--                                                    <el-descriptions-item label="row-key" v-if="formData.extInfo.supportTreeTable==1">-->
<!--                                                        <el-input v-model="formData.extInfo.treeTableRowKey" size="small" placeholder="数据行唯一标识字段,默认为id"></el-input>-->
<!--                                                    </el-descriptions-item>-->
<!--                                                    <el-descriptions-item label="子数据字段名" v-if="formData.extInfo.supportTreeTable==1">-->
<!--                                                        <el-input v-model="formData.extInfo.treeTableChildrenField" size="small" placeholder="子数据字段名,默认为children"></el-input>-->
<!--                                                    </el-descriptions-item>-->
<!--                                                </el-descriptions>-->
                                            </el-form-item>



                                            <el-form-item>
                                                <template #label="scope">
                                                    <el-divider content-position="left">加载数据时loading</el-divider>
                                                </template>
                                                <lcp-config-item title="开启loading" width="6em">
                                                    <el-switch v-model="formData.extInfo.enableTableLoading"
                                                               :active-value="1"
                                                               :inactive-value="0"></el-switch>
                                                </lcp-config-item>
                                            </el-form-item>

                                            <el-form-item>
                                                <template #label="scope">
                                                    <el-divider content-position="left">分页大小（pageSize）</el-divider>
                                                </template>
                                                <el-input-number v-model="formData.extInfo.pageSize" :step="10"
                                                                 :min="1"></el-input-number>
                                            </el-form-item>
                                            <el-form-item label="表格数据URL：">
                                                <template #label="scope">
                                                    <el-divider content-position="left">表格数据URL</el-divider>
                                                </template>
                                                <el-input v-model="formData.extInfo.tableDataUrl"
                                                          placeholder="非必要可不填，为空会自动生成url"></el-input>
                                            </el-form-item>
                                            <el-form-item label="数据删除URL：">
                                                <template #label="scope">
                                                    <el-divider content-position="left">数据删除URL</el-divider>
                                                </template>
                                                <el-input v-model="formData.extInfo.deleteUrl"
                                                          placeholder="非必要可不填，为空会自动生成url"></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </el-scrollbar>
                                </el-tab-pane>

                                <el-tab-pane label="列配置" name="tableColumnConfig" :lazy="true">
                                    <el-scrollbar>
                                        <div class="column-config-detail" v-if="curCol">
                                            <lcp-config-item title="字段名">&nbsp;{{curCol.fieldDbName}}</lcp-config-item>
                                            <lcp-config-item title="字段类型">
                                                &nbsp;{{curCol.fieldDbType}}
                                                <span v-if="curCol.fieldDbLength">({{curCol.fieldDbLength}})</span>
                                            </lcp-config-item>
                                            <lcp-config-item title="Java属性">&nbsp;{{curCol.fieldJavaName}}</lcp-config-item>
                                            <lcp-config-item title="表头标题">
                                                <el-input v-model="curCol.listHeaderTitle"></el-input>
                                            </lcp-config-item>
                                            <lcp-config-item title="是否展示">
                                                <el-switch v-model="curCol.listColumnShow" :active-value="1"
                                                           :inactive-value="0"></el-switch>
                                            </lcp-config-item>
                                            <lcp-config-item title="内容格式">
                                                <el-select v-model="curCol.listValueFormat">
                                                    <el-option :value="item.key" :label="item.value"
                                                               v-for="item in showFormatList"></el-option>
                                                </el-select>
                                            </lcp-config-item>
                                            <lcp-config-item title="" :y="true" v-if="curCol.listValueFormat == 'formatter'">
                                                <el-input v-model="curCol.formControlConfig.listValueFormatHtml"
                                                          type="textarea"
                                                          :autosize="{ minRows: 1, maxRows: 4 }"
                                                          placeholder="自定义格式化html代码"></el-input>
                                            </lcp-config-item>
                                            <lcp-config-item title="展示顺序">
                                                <el-input-number v-model="curCol.listColumnOrder" :min="1" :step="5"></el-input-number>
                                            </lcp-config-item>
                                            <lcp-config-item title="支持排序">
                                                <el-switch v-model="curCol.listColumnSort" :active-value="1"
                                                           :inactive-value="0"></el-switch>
                                            </lcp-config-item>
                                            <lcp-config-item title="搜索类型">
                                                <el-select v-model="curCol.listQueryCondition">
                                                    <el-option :value="item.key" :label="item.value"
                                                               v-for="item in asConditionTypeList"></el-option>
                                                </el-select>
                                            </lcp-config-item>
                                            <lcp-config-item title="列宽">
                                                <el-input v-model="curCol.listColumnWidth"></el-input>
                                            </lcp-config-item>
                                            <lcp-config-item title="表头对齐">
                                                <el-radio-group v-model="curCol.listHeaderAlign">
                                                    <el-radio-button label="left">左</el-radio-button>
                                                    <el-radio-button label="center">中</el-radio-button>
                                                    <el-radio-button label="right">右</el-radio-button>
                                                </el-radio-group>
                                            </lcp-config-item>
                                            <lcp-config-item title="内容对齐">
                                                <el-radio-group v-model="curCol.listValueAlign">
                                                    <el-radio-button label="left">左</el-radio-button>
                                                    <el-radio-button label="center">中</el-radio-button>
                                                    <el-radio-button label="right">右</el-radio-button>
                                                </el-radio-group>
                                            </lcp-config-item>
                                            <lcp-config-item title="固定列">
                                                <el-radio-group v-model="curCol.listColumnFixed">
                                                    <el-radio-button label="left">左</el-radio-button>
                                                    <el-radio-button label="no">无</el-radio-button>
                                                    <el-radio-button label="right">右</el-radio-button>
                                                </el-radio-group>
                                            </lcp-config-item>

                                            <lcp-config-item title="表头提示">
                                                <el-input v-model="curCol.listHeaderTips"
                                                          type="textarea"
                                                          :autosize="{ minRows: 1, maxRows: 4 }"
                                                          placeholder="表头提示"></el-input>
                                            </lcp-config-item>
                                        </div>

                                    </el-scrollbar>
                                </el-tab-pane>
                            </el-tabs>

                        </div>


                        <div class="view-config-right-bar">
                            <!--表格配置-->
                            <el-divider content-position="left">表格列配置</el-divider>
                            <el-table :data="columnListForView" border header-cell-class-name="jo-el-table-header"
                                      :height="defaultHeight-120" :row-style="tableConfigRowStyle">
                                <el-table-column type="index" label="#" width="50" fixed="left" align="center"
                                                 header-align="center"></el-table-column>
                                <el-table-column prop="fieldDbName" label="操作" width="70" fixed="left">
                                    <template #default="scope">
                                        <el-button type="primary" link @click="tableColDetail(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fieldDbName" label="字段" min-width="160" fixed="left">
                                    <template #default="scope">
                                        <div :class="{'field-not-null' : scope.row.fieldDbNotNull==1}">
                                            <div :title="scope.row.fieldDbRemark">
                                                {{scope.row.fieldDbName}}
                                                <el-tag type="success">
                                                    {{scope.row.fieldDbType}}
                                                    <span v-if="scope.row.fieldDbLength">({{scope.row.fieldDbLength}})</span>
                                                </el-tag>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fieldJavaName" label="Java属性" min-width="120"></el-table-column>

                                <el-table-column prop="listHeaderTitle" label="表头标题" min-width="120">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.listHeaderTitle" size="small"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listColumnShow" label="列展示" width="90">
                                    <template #default="scope">
                                        <el-switch v-model="scope.row.listColumnShow" :active-value="1"
                                                   :inactive-value="0"></el-switch>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="listColumnOrder" label="展示顺序" width="135">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.listColumnOrder" :min="1" :step="5"
                                                         size="small" style="width: 100px;"></el-input-number>
                                    </template>
                                </el-table-column>


                                <el-table-column prop="listColumnSort" label="列排序">
                                    <template #default="scope">
                                        <el-switch v-model="scope.row.listColumnSort" :active-value="1"
                                                   :inactive-value="0"></el-switch>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listQueryCondition" label="搜索类型" width="100">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.listQueryCondition" size="small">
                                            <el-option :value="item.key" :label="item.value"
                                                       v-for="item in asConditionTypeList"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="listColumnWidth" label="列宽" width="100">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.listColumnWidth" size="small"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listValueFormat" label="内容格式" width="120">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.listValueFormat" size="small">
                                            <el-option :value="item.key" :label="item.value"
                                                       v-for="item in showFormatList"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="listHeaderAlign" label="表头align" width="135">
                                    <template #default="scope">
                                        <el-radio-group v-model="scope.row.listHeaderAlign" size="small">
                                            <el-radio-button label="left">左</el-radio-button>
                                            <el-radio-button label="center">中</el-radio-button>
                                            <el-radio-button label="right">右</el-radio-button>
                                        </el-radio-group>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listValueAlign" label="内容align" width="135">
                                    <template #default="scope">
                                        <el-radio-group v-model="scope.row.listValueAlign" size="small">
                                            <el-radio-button label="left">左</el-radio-button>
                                            <el-radio-button label="center">中</el-radio-button>
                                            <el-radio-button label="right">右</el-radio-button>
                                        </el-radio-group>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listColumnFixed" label="固定列" width="135">
                                    <template #default="scope">
                                        <el-radio-group v-model="scope.row.listColumnFixed" size="small">
                                            <el-radio-button label="left">左</el-radio-button>
                                            <el-radio-button label="no">无</el-radio-button>
                                            <el-radio-button label="right">右</el-radio-button>
                                        </el-radio-group>
                                    </template>
                                </el-table-column>
<!--                                <el-table-column prop="listHeaderTips" label="表头提示" width="120">-->
<!--                                    <template #default="scope">-->
<!--                                        <el-input v-model="scope.row.listHeaderTips" size="small"></el-input>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->

                            </el-table>

                            <!--表格预览-->
                            <el-divider content-position="left">表格预览</el-divider>
                            <el-table :data="[{}]" border header-cell-class-name="jo-el-table-header"
                                      style="margin-top: 15px;">
                                <el-table-column v-if=" formData.extInfo.tableFirstColumnType == 'checkbox' "
                                                 prop="selection" label="#" type="selection" header-align="center"
                                                 align="center" fixed="left" width="50"></el-table-column>
                                <el-table-column v-if=" formData.extInfo.tableFirstColumnType == 'radio' " type="radio"
                                                 header-align="center" align="center" fixed="left" width="50">
                                    <template #default="scope2">
                                        <el-radio model-value="0" :label="scope2.$index"><span></span></el-radio>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if=" formData.extInfo.tableFirstColumnType == 'index' " prop="index"
                                                 label="#" type="index" header-align="center" align="center"
                                                 fixed="left" width="50"></el-table-column>
                                <template v-for="item in columnListForView">
                                    <el-table-column v-if="item.listColumnShow==1" :key="item.id"
                                                     :prop="item.fieldJavaName" :label="item.listHeaderTitle"
                                                     :min-width="item.listColumnWidth"
                                                     :header-align="item.listHeaderAlign" :align="item.listValueAlign"
                                                     :fixed=" item.listColumnFixed != 'no' ? item.listColumnFixed : false "
                                                     :sortable=" item.listColumnSort == 1 ? 'custom' : false ">
                                        <span v-if="item.fieldJavaType=='Integer' || item.fieldJavaType=='Long'">10</span>
                                        <span v-else-if="item.fieldJavaType=='Date'">2022-07-03 12:00:00</span>
                                        <span v-else="">示例文字</span>
                                    </el-table-column>
                                </template>
                            </el-table>
                        </div>

                    </div>

                </el-tab-pane>

                <el-tab-pane label="表单配置" :lazy="true" name="4">
                    <el-container style="padding: 0px;border: 1px solid #eee"
                                  :style="{'height' : windowHeight - 85 + 'px'}">
                        <el-aside>
                            <el-scrollbar>

                                <div style="padding: 0px 15px 15px 15px;">
                                    <div style="margin-bottom: 15px;">
                                        <el-divider border-style="dashed">快捷方式</el-divider>
                                        <el-button type="primary" @click="batchSetFormColumnWidth(24)"
                                                   :plain="!allWidthIs24" size="small">一行一列
                                        </el-button>
                                        <el-button type="success" @click="batchSetFormColumnWidth(12)"
                                                   :plain="!allWidthIs12" size="small">一行二列
                                        </el-button>
                                        <el-button type="warning" @click="batchSetFormColumnWidth(8)"
                                                   :plain="!allWidthIs8" size="small">一行三列
                                        </el-button>
                                    </div>

                                    <template v-for="item in columnListForForm">
                                        <div class="form-config-field-option" v-if="item.formColumnShow == 0">
                                            <!-- v-if="item.formColumnShow == 0" -->
                                            <el-tag effect="plain">{{item.fieldJavaName}} : {{item.formControlTitle}}
                                            </el-tag>
                                            <el-switch v-model="item.formColumnShow"
                                                       :active-value="1"
                                                       :inactive-value="0"
                                                       active-text="√"
                                                       inactive-text="×"
                                                       inline-prompt
                                            ></el-switch>
                                        </div>
                                    </template>


                                </div>
                            </el-scrollbar>
                        </el-aside>
                        <el-main style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
                            <el-scrollbar wrap-class="previewBoxScroll">
                                <el-form :label-width="formData.formLabelWidth"
                                         :label-position="formData.formLabelPosition">
                                    <div style="padding: 7.5px;">
                                        <el-row :gutter="10" class="jo-el-row-vertical-gutter">
                                            <template v-for="item in columnListForFormDrag">
                                                <el-col :span="item.formColumnGridWidth"
                                                        v-if="item.formColumnShow == 1">
                                                    <div draggable="true"
                                                         ondragstart="moveColumnStart()"
                                                         ondrag="moveColumnIng()"
                                                         ondragend="moveColumnEnd()"
                                                         class="preview-col-item"
                                                         :class="{'preview-col-item-active' : curCol && curCol.fieldDbName == item.fieldDbName}"
                                                         @click="colDetail(item)"
                                                         :dataColId="item.fieldDbName">
                                                        <div style="padding: 10px;padding-bottom: 0px;">
                                                            <el-form-item :label="item.formControlTitle">
                                                                <template v-if="item.formControlType == 'input'">
                                                                    <el-input
                                                                            :placeholder="item.formControlPlaceholder"></el-input>
                                                                </template>
                                                                <template v-else-if="item.formControlType == 'number'">
                                                                    <el-input-number
                                                                            :placeholder="item.formControlPlaceholder"></el-input-number>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'date'">
                                                                    <el-date-picker type="date"
                                                                                    :placeholder="item.formControlPlaceholder"></el-date-picker>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'time'">
                                                                    <el-date-picker type="datetime"
                                                                                    :placeholder="item.formControlPlaceholder"></el-date-picker>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'select'">
                                                                    <el-select
                                                                            :placeholder="item.formControlPlaceholder">
                                                                        <el-option value="" label=""></el-option>
                                                                    </el-select>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'treeSelect'">
                                                                    <el-select
                                                                            :placeholder="item.formControlPlaceholder">
                                                                        <el-option value="" label=""></el-option>
                                                                    </el-select>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'iconSelect'">
                                                                    <el-select
                                                                            :placeholder="item.formControlPlaceholder">
                                                                        <el-option value="" label=""></el-option>
                                                                    </el-select>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'textarea'">
                                                                    <el-input :rows="2" type="textarea"
                                                                              :placeholder="item.formControlPlaceholder"></el-input>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'switch'">
                                                                    <el-switch :model-value="true"></el-switch>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'radio'">
                                                                    <el-radio-group>
                                                                        <el-radio :label="3">Option A</el-radio>
                                                                        <el-radio :label="6">Option B</el-radio>
                                                                    </el-radio-group>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'checkbox'">
                                                                    <el-checkbox-group>
                                                                        <el-checkbox label="Option A"></el-checkbox>
                                                                        <el-checkbox label="Option B"></el-checkbox>
                                                                    </el-checkbox-group>
                                                                </template>
                                                                <template
                                                                        v-else-if="item.formControlType == 'label'">
                                                                    <el-tag>label</el-tag>
                                                                </template>
                                                                <template v-else="">
                                                                    <el-input
                                                                            :placeholder="item.formControlPlaceholder"></el-input>
                                                                </template>
                                                            </el-form-item>
                                                        </div>
                                                        <div class="preview-col-oper">
                                                            <el-form :inline="true" label-position="left"
                                                                     size="small">
                                                                <el-form-item label="">
                                                                    <el-switch v-model="item.formColumnShow"
                                                                               :active-value="1"
                                                                               :inactive-value="0"></el-switch>
                                                                </el-form-item>
                                                                <el-form-item label="">
                                                                    <el-input-number
                                                                            v-model="item.formColumnGridWidth"
                                                                            size="small" :min="1"
                                                                            :max="24"></el-input-number>
                                                                </el-form-item>
                                                                <el-form-item label="">
                                                                    <el-select v-model="item.formControlType"
                                                                               size="small">
                                                                        <el-option :value="item.key"
                                                                                   :label="item.value"
                                                                                   v-for="item in controlTypeList"></el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-form>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </template>

                                        </el-row>

                                    </div>

                                </el-form>
                            </el-scrollbar>
                        </el-main>
                        <el-aside>
<!--                            <el-scrollbar>-->
                                <div style="padding: 0px 10px;height: 100%;">
                                    <el-tabs model-value="first" class="qy-full-tabs">
                                        <el-tab-pane label="表单项配置" name="first">
                                            <el-scrollbar>
                                                <el-form label-width="120px" v-if="curCol" label-position="top">
                                                    <el-form-item label="标题">
                                                        <el-input v-model="curCol.formControlTitle"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="placeholder">
                                                        <el-input v-model="curCol.formControlPlaceholder"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="宽度" style="margin-bottom: 30px;">
                                                        <el-slider v-model="curCol.formColumnGridWidth" :min="1"
                                                                   :max="24"
                                                                   size="small"
                                                                   :marks="{1:'1',6:'6',12:'12',18:'18',24:'24'}"
                                                                   style="width: 230px;margin-left: 12px;"></el-slider>
                                                    </el-form-item>
                                                    <el-form-item label="默认值">
                                                        <el-input v-model="curCol.formControlDefault"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="控件类型">
                                                        <el-select v-model="curCol.formControlType">
                                                            <el-option :value="item.key" :label="item.value"
                                                                       v-for="item in controlTypeList"></el-option>
                                                        </el-select>
                                                    </el-form-item>

                                                    <!--表单项配置-->
                                                    <div v-if="curCol && curCol.formControlConfig"
                                                         style="margin-top: -8px;margin-bottom: 10px;">
                                                        <el-descriptions :column="1" size="small" border
                                                                         v-if="curCol.formControlType == 'treeSelect'">
                                                            <el-descriptions-item label="可选任意层级">
                                                                <el-switch v-model="curCol.formControlConfig.treeSupportCheckAny" size="small"
                                                                           :active-value="1" :inactive-value="0"></el-switch>
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="子数据字段名">
                                                                <el-input v-model="curCol.formControlConfig.childrenField" size="small" placeholder="子数据字段名,默认children"></el-input>
                                                            </el-descriptions-item>
                                                        </el-descriptions>

                                                        <el-descriptions :column="1" size="small" border
                                                                         v-if="curCol.formControlType == 'number'">
                                                            <el-descriptions-item label="最小值" width="70">
                                                                <el-input-number size="small" :controls="false"
                                                                                 v-model="curCol.formControlConfig.min"
                                                                                 placeholder="最小值"></el-input-number>
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="最大值" width="70">
                                                                <el-input-number size="small" :controls="false"
                                                                                 v-model="curCol.formControlConfig.max"
                                                                                 placeholder="最大值"></el-input-number>
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="步长" width="70">
                                                                <el-input-number size="small" :controls="false"
                                                                                 v-model="curCol.formControlConfig.step"
                                                                                 placeholder="步长"></el-input-number>
                                                            </el-descriptions-item>
                                                        </el-descriptions>

                                                        <el-descriptions :column="1" size="small" border
                                                                         v-if="curCol.formControlType == 'textarea'">
                                                            <el-descriptions-item label="行数" width="70">
                                                                <el-input-number size="small" :controls="false"
                                                                                 v-model="curCol.formControlConfig.rows"
                                                                                 placeholder="文本域行数"></el-input-number>
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="自适应" width="70">
                                                                <el-switch v-model="curCol.formControlConfig.autosize"
                                                                           :active-value="1"
                                                                           :inactive-value="0"></el-switch>
                                                            </el-descriptions-item>
                                                        </el-descriptions>

                                                        <el-descriptions :column="1" size="small" border
                                                                         v-if="curCol.formControlType == 'switch'">
                                                            <el-descriptions-item label="选中值" width="70">
<!--                                                                <template #label="scope">-->
<!--                                                                    <div style="width: 70px;">选中值</div>-->
<!--                                                                </template>-->
                                                                <div class="flex-x">
                                                                    <div class="qy-flex-1 margin-right-10">
                                                                        <el-input size="small"
                                                                                  v-model="curCol.formControlConfig.yesValue"
                                                                                  placeholder="选中值"></el-input>
                                                                    </div>
                                                                    <div class="qy-flex-1">
                                                                        <el-input size="small"
                                                                                  v-model="curCol.formControlConfig.yesText"
                                                                                  placeholder="选中文案"></el-input>
                                                                    </div>
                                                                </div>
                                                            </el-descriptions-item>
                                                            <el-descriptions-item label="未选中值" width="70">
<!--                                                                <template #label="scope">-->
<!--                                                                    <div style="width: 70px;">未选中值</div>-->
<!--                                                                </template>-->
                                                                <div class="flex-x">
                                                                    <div class="qy-flex-1 margin-right-10">
                                                                        <el-input size="small"
                                                                                  v-model="curCol.formControlConfig.noValue"
                                                                                  placeholder="未选中值"></el-input>
                                                                    </div>
                                                                    <div class="qy-flex-1">
                                                                        <el-input size="small"
                                                                                  v-model="curCol.formControlConfig.noText"
                                                                                  placeholder="未选中文案"></el-input>
                                                                    </div>
                                                                </div>
                                                            </el-descriptions-item>
                                                        </el-descriptions>

                                                    </div>


                                                    <template v-if="curCol && curCol.formControlDataSource">

                                                        <el-form-item label="选项数据源" v-if="showOptionDataSource">
                                                            <div>
                                                                <el-radio-group
                                                                        v-model="curCol.formControlDataSource.dataType">
                                                                    <el-radio-button label="no">无</el-radio-button>
                                                                    <el-radio-button label="static">静态数据</el-radio-button>
                                                                    <el-radio-button label="url">URL</el-radio-button>
                                                                    <el-radio-button label="dict">字典</el-radio-button>
                                                                </el-radio-group>
                                                            </div>

                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'static'">
                                                                <el-row v-for="(op, opIdx) in curCol.formControlDataSource.optionItemList"
                                                                        style="margin-bottom: 5px;" :gutter="10">
                                                                    <el-col :span="5">
                                                                        <el-input v-model="op.key" placeholder="值"
                                                                                  size="small"></el-input>
                                                                    </el-col>
                                                                    <el-col :span="8">
                                                                        <el-input v-model="op.value" placeholder="文案"
                                                                                  size="small"></el-input>
                                                                    </el-col>
                                                                    <el-col :span="8">
<!--                                                                        <el-input v-model="op.styleType" placeholder="样式类型"-->
<!--                                                                                  size="small"></el-input>-->
                                                                        <el-select v-model="op.styleType" placeholder="样式类型" size="small"
                                                                                   clearable
                                                                                   filterable
                                                                                   allow-create
                                                                        >
                                                                            <el-option value="primary">primary</el-option>
                                                                            <el-option value="success">success</el-option>
                                                                            <el-option value="info">info</el-option>
                                                                            <el-option value="warning">warning</el-option>
                                                                            <el-option value="danger">danger</el-option>
                                                                        </el-select>
                                                                    </el-col>
                                                                    <el-col :span="3">
                                                                        <el-button type="danger" link size="small"
                                                                                   @click="deleteOptionItem(opIdx)">
                                                                            <i class="fa fa-minus-square-o"
                                                                               aria-hidden="true"></i>
                                                                        </el-button>
                                                                    </el-col>
                                                                </el-row>
                                                                <div style="clear: both;display: block;width: 200px;">
                                                                    &nbsp;<el-button type="primary" link size="small"
                                                                                     @click="addOptionItem">添加选项
                                                                </el-button>
                                                                </div>
                                                            </div>

                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'url'">
                                                                <el-form-item style="margin-bottom: 5px;">
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.dataUrl"
                                                                            placeholder="数据Url" size="small">
                                                                        <template #prepend>URL</template>
                                                                        <template #append>
                                                                            <el-dropdown>
                                                                                <span class="el-dropdown-link"><i class="fa fa-angle-down"></i></span>
                                                                                <template #dropdown>
                                                                                    <el-dropdown-menu>
                                                                                        <el-dropdown-item v-for="item in controlDataSourceShortcut" @click="controlDataSourceClick(item)">{{item.name}}</el-dropdown-item>
                                                                                    </el-dropdown-menu>
                                                                                </template>
                                                                            </el-dropdown>
                                                                        </template>
                                                                    </el-input>
                                                                </el-form-item>
                                                                <el-form-item style="margin-bottom: 5px;">
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.keyField"
                                                                            placeholder="值字段" size="small">
                                                                        <template #prepend>值字段</template>
                                                                    </el-input>
                                                                </el-form-item>
                                                                <el-form-item>
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.valueField"
                                                                            placeholder="文本字段" size="small">
                                                                        <template #prepend>文本字段</template>
                                                                    </el-input>
                                                                </el-form-item>
                                                            </div>
                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'dict'">
                                                                <el-select v-model="curCol.formControlDataSource.dictCode" :filterable="true" :clearable="true">
                                                                    <el-option v-for="item in dictCodeOptions" :value="item.code" :label="item.name">{{item.name}} ({{item.code}})</el-option>
                                                                </el-select>
                                                                &nbsp;
                                                                <el-button link type="primary" @click="loadDictCodeOptions" title="点击刷新字典选项"><i class="fa fa-refresh"></i></el-button>
                                                            </div>

                                                        </el-form-item>

                                                        <el-form-item label="表单校验" v-if="curCol.formControlCheckRule">
                                                            <!--                                                        {{curCol.v_checkRuleList}}-->
                                                            <el-select v-model="curCol.v_checkRuleTypeList"
                                                                       multiple
                                                                       collapse-tags
                                                                       collapse-tags-tooltip
                                                                       @change="checkRuleListChange">
                                                                <el-option :value="item.key" :label="item.value"
                                                                           v-for="item in controlCheckList"></el-option>
                                                            </el-select>
                                                            <div v-for="check in curCol.formControlCheckRule.checkRuleList"
                                                                 style="margin-top: 8px;border: #ccc dashed 1px;padding: 8px;line-height: 1.7;">
                                                                <el-tag style="margin-bottom: 5px;">
                                                                    {{getCheckRuleName(check.checkType)}}
                                                                </el-tag>
                                                                <el-input v-model="check.errorTips" placeholder="错误提示文案"
                                                                          size="small"
                                                                          style="margin-bottom: 5px;"></el-input>
                                                                <el-input v-if="check.checkType=='ErrReg'"
                                                                          v-model="check.checkReg" :row="2"
                                                                          placeholder="正则表达式" size="small"
                                                                          style="margin-bottom: 5px;"></el-input>
                                                                <template
                                                                        v-if="check.checkType=='ErrLength' || check.checkType=='ErrNumber'">
                                                                    <el-input v-model="check.min" placeholder="下限"
                                                                              size="small" style="width: 40%"
                                                                              style="margin-bottom: 5px;"></el-input>
                                                                    ~
                                                                    <el-input v-model="check.max" placeholder="上限"
                                                                              size="small" style="width: 40%"
                                                                              style="margin-bottom: 5px;"></el-input>
                                                                </template>
                                                            </div>
                                                        </el-form-item>
                                                    </template>

                                                </el-form>
                                            </el-scrollbar>
                                        </el-tab-pane>

                                        <el-tab-pane label="显隐控制" name="show">
                                            <el-scrollbar>
                                                <el-form v-if="curCol && curCol.formColumnShowConfig"
                                                         label-position="top" label-width="140px">
                                                    <el-form-item label="隐藏规则">
                                                        <template #label="scope">
                                                            <el-divider content-position="left"><span
                                                                    class="item-attr-title-style">隐藏规则</span>
                                                            </el-divider>
                                                        </template>
                                                        <el-radio-group v-model="curCol.formColumnShowConfig.showType">
                                                            <jo-el-data url="/lowcode/generate/getShowTypeList">
                                                                <template #default="scope">
                                                                    <el-radio :label="item.key" style="width: 95px;"
                                                                              v-for="item in scope.data">{{item.value}}
                                                                    </el-radio>
                                                                </template>
                                                            </jo-el-data>
                                                        </el-radio-group>
                                                        <div v-if="curCol.formColumnShowConfig.showType == 4" class="flex-x">
                                                            <div>隐藏条件：</div>
                                                            <div class="qy-flex-1">
                                                                <el-input v-model="curCol.formColumnShowConfig.hideCondition" placeholder="隐藏条件布尔表达式,例如:formData.id==1"></el-input>
                                                            </div>
                                                            <div style="padding: 0px 10px;color: #E6A33F;">
                                                                <el-tooltip effect="dark" placement="top-start"
                                                                        content="变量提示,formData:表单数据,addFlag:新增表单标识,editFlag:编辑表单标识,以及其他">
                                                                    <i class="fa fa-question-circle-o"></i>
                                                                    <el-button>top-start</el-button>
                                                                </el-tooltip>
                                                            </div>
                                                        </div>
                                                    </el-form-item>

                                                    <el-form-item label="禁用规则">
                                                        <template #label="scope">
                                                            <el-divider content-position="left"><span
                                                                    class="item-attr-title-style">禁用规则</span>
                                                            </el-divider>
                                                        </template>
                                                        <el-radio-group
                                                                v-model="curCol.formColumnShowConfig.disableType">
                                                            <jo-el-data url="/lowcode/generate/getDisableTypeList">
                                                                <template #default="scope">
                                                                    <el-radio :label="item.key" style="width: 95px;"
                                                                              v-for="item in scope.data">{{item.value}}
                                                                    </el-radio>
                                                                </template>
                                                            </jo-el-data>
                                                        </el-radio-group>
                                                        <div v-if="curCol.formColumnShowConfig.disableType == 4" class="flex-x">
                                                            <div>禁用条件：</div>
                                                            <div class="qy-flex-1">
                                                                <el-input v-model="curCol.formColumnShowConfig.disableCondition" placeholder="禁用条件布尔表达式,例如:formData.id==1"></el-input>
                                                            </div>
                                                            <div style="padding: 0px 10px;color: #E6A33F;">
                                                                <el-tooltip effect="dark" placement="top-start"
                                                                            content="变量提示,formData:表单数据,addFlag:新增表单标识,editFlag:编辑表单标识,以及其他">
                                                                    <i class="fa fa-question-circle-o"></i>
                                                                    <el-button>top-start</el-button>
                                                                </el-tooltip>
                                                            </div>
                                                        </div>
                                                    </el-form-item>
                                                </el-form>
                                            </el-scrollbar>
                                        </el-tab-pane>

                                        <el-tab-pane label="全局配置" name="second">
                                            <el-scrollbar>


                                                <el-form label-position="top" label-width="140px">
                                                    <el-form-item label="表单项标题位置">
                                                        <el-radio-group v-model="formData.formLabelPosition">
                                                            <el-radio-button label="left"></el-radio-button>
                                                            <el-radio-button label="top"></el-radio-button>
                                                            <el-radio-button label="right"></el-radio-button>
                                                        </el-radio-group>
                                                    </el-form-item>
                                                    <lcp-config-item title="">
                                                        <div style="color: #606266;">
                                                            隐藏表单更新按钮：
                                                            <el-switch v-model="formData.extInfo.hideFormUpdateFlag"
                                                                       :active-value="1"
                                                                       :inactive-value="0"></el-switch>
                                                        </div>
                                                    </lcp-config-item>
<!--                                                    <el-form-item label="">-->
<!--                                                        <el-radio-group v-model="formData.extInfo.hideFormUpdateFlag">-->
<!--                                                            <el-radio label="隐藏">隐藏</el-radio>-->
<!--                                                            <el-radio label="展示">展示</el-radio>-->
<!--                                                        </el-radio-group>-->
<!--                                                    </el-form-item>-->
                                                    <el-form-item label="表单宽度">
                                                        <el-input v-model="formData.extInfo.formWidth"
                                                                  placeholder="表单宽度"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="表单项标题宽度">
                                                        <el-input v-model="formData.formLabelWidth"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="表单详情URL">
                                                        <el-input v-model="formData.extInfo.detailUrl"
                                                                  placeholder="非必要可不填，为空会自动生成url"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="数据插入URL">
                                                        <el-input v-model="formData.extInfo.insertUrl"
                                                                  placeholder="非必要可不填，为空会自动生成url"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="数据更新URL">
                                                        <el-input v-model="formData.extInfo.updateUrl"
                                                                  placeholder="非必要可不填，为空会自动生成url"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                            </el-scrollbar>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
<!--                            </el-scrollbar>-->
                        </el-aside>
                    </el-container>

                </el-tab-pane>

                <el-tab-pane label="表单定制" :lazy="false" name="5">
                    <div class="form-config-box" :style="{'height' : windowHeight - 85 + 'px'}">
                        <div class="form-config-left">

                            <el-tabs v-model="formConfigLeftTab" class="qy-full-tabs">
                                <el-tab-pane label="可选组件" name="component">
                                    <el-scrollbar>

                                        <el-collapse v-model="formConfigCollapse" accordion>

                                            <el-collapse-item v-for="group in componentOptionGroupList"
                                                              :title="group.title" :name="group.name">
                                                <template #title="">
                                                    <div class="form-config-ele-group-icon">
                                                        <i class="fa" :class="group.icon"></i>
                                                    </div>
                                                    {{group.title}}
                                                </template>
                                                <div class="form-config-ele-list">
                                                    <form-config-ele-option v-for="option in group.componentList"
                                                                            :ele="option"
                                                    ></form-config-ele-option>
                                                </div>
                                            </el-collapse-item>

                                        </el-collapse>

                                    </el-scrollbar>
                                </el-tab-pane>
                                <el-tab-pane label="DOM树" name="dom">
                                    <el-tree ref="domTreeRef"
                                             :data="domTree"
                                             :draggable="true"
                                             :allow-drop="domTreeAllowDrop"
                                             :allow-drag="domTreeAllowDrag"
                                             :props="{ label : 'type' , children : 'childrenList' }"
                                             :default-expand-all="true"
                                             :check-on-click-node="true"
                                             node-key="id"
                                             :expand-on-click-node="false"
                                             @node-drop="domTreeDrop"
                                             @node-click="domTreeClick"
                                    >
                                        <template #default="{ node, data }">
                                            <span class="dom-tree-item-title"
                                                  :class="{ 'dom-tree-item-title-active' : formConfigActiveEle && node.data.id == formConfigActiveEle.id }"
                                                  :title="node.data.type + ' : ' + node.data.id">
                                                {{node.data.type}} ({{node.data.id}})
                                            </span>
                                            <span>
                                                <!--TODO 操作-->
<!--                                                <el-button link type="primary" @click.stop="toAdd(node.data)">-->
<!--                                                    <i class="fa fa-plus-circle" aria-hidden="true"></i>-->
<!--                                                </el-button>-->
                                                <el-button style="margin-left: 5px;" link type="danger" @click.stop="removeEleWrap(node.data)">
                                                    <i class="fa fa-minus-circle" aria-hidden="true"></i>
                                                </el-button>
                                            </span>
                                        </template>
                                    </el-tree>
                                </el-tab-pane>
                            </el-tabs>

                        </div>
                        <div class="form-config-body">
                            <!--工具栏-->
                            <div class="form-config-body-tools">
                                工具栏
                            </div>
                            <!--配置栏核心容器-->
                            <div id="formConfigContainer"
                                 class="form-config-body-container qy-page-container"
                                 @dragover.stop.prevent="dragOverNothing($event)"
                                 @drop.stop="dropFormConfigContainer($event)">
                                <!--                                    <el-scrollbar>-->
                                <form-config-ele-wrap v-for="ele in formPageConfig.elementList"
                                                      :ele="ele"></form-config-ele-wrap>
                                <!--                                    </el-scrollbar>-->
                            </div>
                        </div>
                        <div class="form-config-right">
                            <!--                                {{formConfigActiveEleWrap}}-->
                            <el-tabs v-model="formConfigRightTab" class="qy-full-tabs">
                                <el-tab-pane label="组件属性" name="detail">
                                    <el-scrollbar>
                                        <template v-if="formConfigActiveEle">
                                            <el-form :model="formConfigActiveEle" label-width="70px"
                                                     label-position="right">
                                                {{formConfigActiveEle}}
                                                <div>
                                                    <el-button link type="danger" @click="removeActiveEle">删除</el-button>
                                                </div>
                                                <el-form-item label="组件ID">
                                                    <el-input v-model="formConfigActiveEle.id"></el-input>
                                                </el-form-item>
                                                <el-form-item label="组件类型">
                                                    <el-select v-model="formConfigActiveEle.type" :filterable="true"
                                                               :disabled="true">
                                                        <el-option v-for="item in formConfigBaseComponentList"
                                                                   :value="item.type" :label="item.text+'：'+item.type">
                                                            {{item.text}}：{{item.type}}
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-divider content-position="left">
                                                    Class
                                                </el-divider>
                                                <el-form-item label="" label-width="auto">
                                                    <el-select class="qy-width-100p"
                                                               v-model="formConfigActiveEle.classList"
                                                               :filterable="true" :multiple="true" :allow-create="true">
                                                        <el-option v-for="item in formConfigClassOptionList"
                                                                   :value="item.value" :label="item.value">
                                                            {{item.value}}：{{item.text}}
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-divider content-position="left">
                                                    Style内联样式
                                                    （
                                                    <el-button link type="primary" @click="addStyle">添加</el-button>
                                                    ）
                                                </el-divider>
                                                <el-form-item v-for="(style,idx) in formConfigActiveEle.styleList"
                                                              label-width="auto">
                                                    <div class="flex-x qy-flex-vertical-center">
                                                        <div class="margin-right-10" style="flex: 3;">
                                                            <!--                                                                <el-cascader-->
                                                            <!--                                                                        v-model="style.name"-->
                                                            <!--                                                                        :options="formConfigStyleOptionList"-->
                                                            <!--                                                                        :props="{expandTrigger:'hover'}"-->
                                                            <!--                                                                        :show-all-levels="false"-->
                                                            <!--                                                                        :filterable="true"-->
                                                            <!--                                                                >-->
                                                            <!--                                                                </el-cascader>-->
                                                            <el-select v-model="style.name" class="qy-width-100p"
                                                                       :filterable="true"
                                                                       :allow-create="true">
                                                                <el-option-group
                                                                        v-for="group in formConfigStyleOptionList"
                                                                        :key="group.value"
                                                                        :label="group.label"
                                                                >
                                                                    <el-option v-for="item in group.children"
                                                                               :value="item.value" :label="item.label">
                                                                        {{item.label}}
                                                                    </el-option>
                                                                </el-option-group>

                                                            </el-select>
                                                        </div>
                                                        <div class="margin-right-10" style="flex: 2;">
                                                            <el-input v-model="style.value"></el-input>
                                                        </div>
                                                        <div>
                                                            <el-button link type="danger" @click="removeStyle(idx)"><i
                                                                    class="fa fa-trash-o"></i></el-button>
                                                        </div>
                                                    </div>
                                                </el-form-item>
                                                <el-divider content-position="left">
                                                    组件属性
                                                    （
                                                    <el-button link type="primary" @click="addAttr">添加</el-button>
                                                    ）
                                                </el-divider>
                                                <el-form-item v-for="(attr,idx) in formConfigActiveEle.attrList"
                                                              label-width="auto">
                                                    <div class="flex-x qy-flex-vertical-center">
                                                        <div class="margin-right-10" style="flex: 3;">
                                                            <el-select v-model="attr.name" class="qy-width-100p"
                                                                       :filterable="true"
                                                                       :allow-create="true">
                                                                <el-option v-for="item in formConfigAttrOptionList"
                                                                           :value="item.attrName"
                                                                           :label="item.attrName">
                                                                    {{item.attrName}}：{{item.text}}
                                                                </el-option>
                                                            </el-select>
                                                        </div>
                                                        <div class="margin-right-10" style="flex: 2;">
                                                            <el-input v-model="attr.value"></el-input>
                                                        </div>
                                                        <div>
                                                            <el-button link type="danger" @click="removeAttr(idx)"><i
                                                                    class="fa fa-trash-o"></i></el-button>
                                                        </div>
                                                    </div>
                                                </el-form-item>
                                            </el-form>
                                        </template>
                                    </el-scrollbar>
                                </el-tab-pane>
                            </el-tabs>


                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </el-col>
    </el-row>


    <!--查询条件选择表单-->
    <el-dialog v-model="searchConditionListForm" title="添加查询条件">
        <span v-if="!columnListForViewCondition || columnListForViewCondition.length == 0">暂无可选字段~</span>
        <el-checkbox-group v-model="searchConditionChecked">
            <el-checkbox v-for="item in columnListForViewCondition"
                         style="width: 110px;"
                         :label="item.fieldJavaName">{{item.listHeaderTitle}}
            </el-checkbox>
        </el-checkbox-group>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="searchConditionListForm = false">取消</el-button>
                <el-button type="primary" @click="searchConditionConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!--按钮弹层-->
    <el-dialog v-model="btnFormDialog" title="按钮">
        <el-form :model="btnFormShowData" label-position="right" label-width="85px">
            <el-form-item label="按钮编号" v-if="btnFormData.code">
                <el-input v-model="btnFormShowData.code" :disabled="!!btnFormData.code"></el-input>
            </el-form-item>
            <el-form-item label="按钮名称">
                <el-input v-model="btnFormShowData.name" placeholder="例如：新增"></el-input>
            </el-form-item>
            <el-form-item label="按钮尺寸">
                <el-radio-group v-model="btnFormShowData.size">
                    <el-radio-button label="large">大</el-radio-button>
                    <el-radio-button label="default">正常</el-radio-button>
                    <el-radio-button label="small">小</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="按钮样式">
                <el-select v-model="btnFormShowData.type">
                    <jo-el-data url="/lowcode/generate/getButtonTypeList">
                        <template #default="scope">
                            <el-option v-for="item in scope.data" :key="item.key" :value="item.key"
                                       :label="item.value"></el-option>
                        </template>
                    </jo-el-data>
                </el-select>
            </el-form-item>
            <el-form-item label="按钮类型">
                <el-select v-model="btnFormShowData.category">
                    <jo-el-data url="/lowcode/generate/getButtonCategoryList">
                        <template #default="scope">
                            <el-option v-for="item in scope.data" :key="item.key" :value="item.key"
                                       :label="item.value"></el-option>
                        </template>
                    </jo-el-data>
                </el-select>
            </el-form-item>
            <el-form-item label="显示条件">
                <el-input v-model="btnFormShowData.showRule" placeholder="显示条件表达式"></el-input>
            </el-form-item>
            <el-form-item label="点击事件">
                <el-input v-model="btnFormShowData.clickFunctionName" placeholder="例如：search，没有则为空"></el-input>
            </el-form-item>
            <el-form-item label="事件脚本">
                <el-input type="textarea" :rows="2" autosize v-model="btnFormShowData.clickScript"
                          placeholder="例如：search(){...}，没有则为空"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="btnFormDialog=false">取消</el-button>
                <el-button type="primary" @click="saveListBtn">确认</el-button>
            </span>
        </template>
    </el-dialog>

</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<!--<script src="D:\dev\workspace\qingyun\qingyun-static\src\main\resources\static\js\lowcode\generateForm.js"></script>-->
<script src="/static/js/lowcode/page-config-component-dict.js"></script>
<script src="/static/js/lowcode/page-config-component.js"></script>
<script src="/static/js/lowcode/generateForm_form_v2.js"></script>
<script src="/static/js/lowcode/generateForm.js"></script>

<script type="text/javascript">


</script>

</body>
</html>
